<template>
  <div class="tcm-constitution-container">
    <div class="header">
      <h3>中医体质辨识</h3>
    </div>

    <div class="questionnaire-card">
      <h4>体质测试问卷</h4>
      <el-form :model="answers" label-position="top">
        <el-form-item label="1. 您感到精力充沛吗？">
          <el-radio-group v-model="answers.q1">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="2. 您容易感到疲乏，精力不支吗？">
          <el-radio-group v-model="answers.q2">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="3. 您容易感到手脚发凉吗？">
          <el-radio-group v-model="answers.q3">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="4. 您容易出汗，且汗多吗？">
          <el-radio-group v-model="answers.q4">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="5. 您皮肤容易长痤疮或湿疹吗？">
          <el-radio-group v-model="answers.q5">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="6. 您容易感到口干，想喝水吗？">
          <el-radio-group v-model="answers.q6">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="7. 您大便稀烂或黏腻，不易冲净吗？">
          <el-radio-group v-model="answers.q7">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="8. 您情绪容易紧张、焦虑或烦躁吗？">
          <el-radio-group v-model="answers.q8">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="9. 您身体容易感觉沉重，肢体困倦吗？">
          <el-radio-group v-model="answers.q9">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="10. 您容易健忘，注意力不集中吗？">
          <el-radio-group v-model="answers.q10">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="11. 您容易感到胸闷、胁胀，或腹部胀满不适吗？">
          <el-radio-group v-model="answers.q11">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="12. 您皮肤上容易出现瘀点、瘀斑，或面色晦暗吗？">
          <el-radio-group v-model="answers.q12">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="13. 您舌苔厚腻，或舌体胖大有齿痕吗？">
          <el-radio-group v-model="answers.q13">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="14. 您容易对花粉、尘螨、某些食物或药物过敏吗？">
          <el-radio-group v-model="answers.q14">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="15. 您容易感到咽喉干燥、声音嘶哑吗？">
          <el-radio-group v-model="answers.q15">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="16. 您容易感到烦躁不安，失眠多梦吗？">
          <el-radio-group v-model="answers.q16">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="17. 您眼睛容易干涩，或视物模糊吗？">
          <el-radio-group v-model="answers.q17">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="18. 您容易感到头晕目眩，站立不稳吗？">
          <el-radio-group v-model="answers.q18">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="19. 您容易感到肢体麻木，或关节僵硬不适吗？">
          <el-radio-group v-model="answers.q19">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="20. 您容易感到腹部胀痛，或大便不规律吗？">
          <el-radio-group v-model="answers.q20">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">很少</el-radio>
            <el-radio :label="2">有时</el-radio>
            <el-radio :label="3">经常</el-radio>
            <el-radio :label="4">总是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitQuestionnaire">
            提交问卷
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 修改后的查看历史测试结果卡片 -->
    <el-card shadow="hover" class="history-card" @click="goToHistory">
      <div class="history-card-content">
        <el-icon class="history-icon">
          <Clock />
        </el-icon>
        <span>查看历史体质测试结果</span>
        <el-icon class="arrow-icon">
          <ArrowRight />
        </el-icon>
      </div>
    </el-card>

    <!-- 修改后的体质辨识结果卡片 -->
    <el-card shadow="hover" class="result-card" v-if="constitutionResult"
      :style="{ borderLeftColor: constitutionResult.color }">
      <template #header>
        <div class="card-header">
          <h4>您的体质类型：{{ constitutionResult.type }}</h4>
          <el-tag :color="constitutionResult.color" effect="dark" round>{{ constitutionResult.type }}</el-tag>
        </div>
      </template>
      <div class="result-content">
        <div class="result-section">
          <p><strong>描述:</strong> {{ constitutionResult.description }}</p>
          <p><strong>特点:</strong> {{ constitutionResult.characteristics }}</p>
          <p><strong>常见表现:</strong> {{ constitutionResult.manifestations }}</p>
          <p><strong>易患疾病:</strong> {{ constitutionResult.predispositions }}</p>
        </div>
        <el-divider>养生建议</el-divider>
        <div class="result-section">
          <p><strong>饮食:</strong> {{ constitutionResult.diet }}</p>
          <p><strong>运动:</strong> {{ constitutionResult.exercise }}</p>
          <p><strong>情志:</strong> {{ constitutionResult.emotions }}</p>
          <p><strong>日常起居:</strong> {{ constitutionResult.dailyLife }}</p>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script setup>
import { ArrowRight, Clock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// 假设的API函数，待实际对接后端
// import { submitConstitutionTestApi } from '../api/tcmConstitution' 

const router = useRouter()
const answers = reactive({
  q1: null, q2: null, q3: null, q4: null, q5: null,
  q6: null, q7: null, q8: null, q9: null, q10: null,
  q11: null, q12: null, q13: null, q14: null, q15: null,
  q16: null, q17: null, q18: null, q19: null, q20: null,
})
const loading = ref(false)
const constitutionResult = ref(null)

const constitutionTypes = {
  '平和质': {
    description: '精力充沛，面色红润，性格开朗，睡眠好，饮食佳，适应能力强。',
    characteristics: '性格平和，健康稳定。',
    manifestations: '不易生病，自愈力强。',
    predispositions: '无明显倾向。',
    diet: '均衡饮食，不偏食，多吃蔬菜水果。',
    exercise: '适量运动，保持心情愉悦。',
    emotions: '保持乐观心态，避免情绪波动。',
    dailyLife: '作息规律，劳逸结合。',
    color: '#2e8b57' // 绿色
  },
  '气虚质': {
    description: '气息低弱，言语无力，易出虚汗，疲乏无力，面色苍白，舌淡苔白。',
    characteristics: '精力不足，易疲劳。',
    manifestations: '语声低微，容易感冒。',
    predispositions: '易患感冒、内脏下垂等病。',
    diet: '多吃益气健脾的食物，如山药、大枣、鸡肉。',
    exercise: '适度运动，避免剧烈活动，如散步、太极拳。',
    emotions: '保持心情舒畅，避免思虑过度。',
    dailyLife: '注意保暖，避免劳累。',
    color: '#ff9800' // 橙色
  },
  '阳虚质': {
    description: '畏寒怕冷，手足不温，面色苍白，精神不振，舌淡胖苔白。',
    characteristics: '怕冷，身体易受寒。',
    manifestations: '喜热饮，大便稀溏。',
    predispositions: '易患水肿、腹泻、阳痿等病。',
    diet: '多吃温阳补气的食物，如羊肉、生姜、桂圆。',
    exercise: '进行温和的运动，如慢跑、八段锦。',
    emotions: '保持积极乐观，避免郁闷。',
    dailyLife: '注意防寒保暖，避免居住潮湿环境。',
    color: '#409EFF' // 蓝色
  },
  '阴虚质': {
    description: '手足心热，口燥咽干，潮热盗汗，大便干燥，舌红少苔。',
    characteristics: '身体缺水，易生内热。',
    manifestations: '皮肤干燥，失眠多梦。',
    predispositions: '易患结核、糖尿病、失眠等病。',
    diet: '多吃滋阴润燥的食物，如百合、梨、银耳。',
    exercise: '避免剧烈运动，宜选择太极拳、瑜伽等。',
    emotions: '保持心情平静，避免过度劳累。',
    dailyLife: '居住环境宜凉爽，避免熬夜。',
    color: '#909399' // 灰色
  },
  '痰湿质': {
    description: '体形肥胖，面部皮肤油脂较多，多汗且黏，胸闷，舌苔厚腻。',
    characteristics: '易胖，身体湿重。',
    manifestations: '口中黏腻，肢体困重。',
    predispositions: '易患高血压、高血脂、糖尿病等病。',
    diet: '多吃健脾利湿的食物，如冬瓜、赤小豆、薏苡仁。',
    exercise: '多进行运动，出汗利湿，如快走、游泳。',
    emotions: '保持心情愉悦，避免过度忧思。',
    dailyLife: '居住环境宜干燥，避免潮湿。',
    color: '#67C23A' // 绿色
  },
  '湿热质': {
    description: '面垢油光，易生痤疮，口苦口干，身重困倦，大便黏滞不畅。',
    characteristics: '身体湿热，易上火。',
    manifestations: '小便短赤，舌苔黄腻。',
    predispositions: '易患痤疮、湿疹、黄疸等病。',
    diet: '多吃清热利湿的食物，如苦瓜、绿豆、冬瓜。',
    exercise: '适量运动，避免在湿热环境中活动。',
    emotions: '保持心情舒畅，避免烦躁。',
    dailyLife: '注意个人卫生，穿着透气。',
    color: '#E6A23C' // 黄色
  },
  '血瘀质': {
    description: '面色晦暗，口唇发紫，皮肤容易出现瘀斑，疼痛固定不移，舌质暗有瘀点。',
    characteristics: '血液循环不畅。',
    manifestations: '皮肤粗糙，月经不调。',
    predispositions: '易患心脑血管疾病、肿瘤等病。',
    diet: '多吃活血化瘀的食物，如山楂、黑木耳、玫瑰花。',
    exercise: '多进行有氧运动，如慢跑、舞蹈。',
    emotions: '保持心情愉畅，避免情绪压抑。',
    dailyLife: '注意保暖，避免寒冷刺激。',
    color: '#F56C6C' // 红色
  },
  '气郁质': {
    description: '形体消瘦或偏胖，面色偏黄，情绪不稳定，多愁善感，郁郁寡欢。',
    characteristics: '情志不畅，多愁善感。',
    manifestations: '胸闷腹胀，失眠。',
    predispositions: '易患抑郁症、焦虑症、乳腺增生等病。',
    diet: '多吃行气解郁的食物，如柑橘、玫瑰花、香菜。',
    exercise: '多进行户外活动，如散步、瑜伽。',
    emotions: '学会情绪管理，多与人交流。',
    dailyLife: '保持生活规律，避免熬夜。',
    color: '#909399' // 灰色
  },
  '特禀质': {
    description: '先天禀赋不足，过敏体质，易对药物、食物、花粉等过敏，可表现为哮喘、荨麻疹等。',
    characteristics: '对某些物质过敏。',
    manifestations: '鼻塞、喷嚏、皮疹。',
    predispositions: '易患过敏性疾病。',
    diet: '清淡饮食，避免食用已知过敏的食物。',
    exercise: '选择适合自己的运动方式，避免过敏原。',
    emotions: '保持心态平和，减少应激。',
    dailyLife: '避免接触过敏原，注意环境清洁。',
    color: '#606266' // 深灰色
  },
}

// 模拟体质辨识逻辑
const identifyConstitution = (answers) => {
  const constitutionScores = {
    '平和质': 0,
    '气虚质': 0,
    '阳虚质': 0,
    '阴虚质': 0,
    '痰湿质': 0,
    '湿热质': 0,
    '血瘀质': 0,
    '气郁质': 0,
    '特禀质': 0,
  };

  // 根据问题答案计算各体质得分
  // 平和质得分与症状越少越相关，与其他体质负相关
  constitutionScores['平和质'] += (4 - answers.q1); // q1: 精力充沛，高分表示平和，低分表示非平和，此处反向计分
  constitutionScores['平和质'] += answers.q1; // q1: 精力充沛，高分表示平和，低分表示非平和，此处正向计分

  // 气虚质
  constitutionScores['气虚质'] += answers.q2; // 疲乏无力
  constitutionScores['气虚质'] += answers.q4; // 多汗
  constitutionScores['气虚质'] += answers.q10; // 健忘注意力不集中
  constitutionScores['气虚质'] += answers.q18; // 头晕目眩站立不稳

  // 阳虚质
  constitutionScores['阳虚质'] += answers.q3; // 手脚发凉

  // 阴虚质
  constitutionScores['阴虚质'] += answers.q6; // 口干
  constitutionScores['阴虚质'] += answers.q15; // 咽喉干燥声音嘶哑
  constitutionScores['阴虚质'] += answers.q16; // 烦躁不安失眠多梦
  constitutionScores['阴虚质'] += answers.q17; // 眼睛干涩视物模糊

  // 痰湿质
  constitutionScores['痰湿质'] += answers.q7; // 大便稀烂或黏腻
  constitutionScores['痰湿质'] += answers.q9; // 身体沉重肢体困倦
  constitutionScores['痰湿质'] += answers.q11; // 胸闷胁胀腹胀
  constitutionScores['痰湿质'] += answers.q13; // 舌苔厚腻舌体胖大有齿痕
  constitutionScores['痰湿质'] += answers.q18; // 头晕目眩站立不稳
  constitutionScores['痰湿质'] += answers.q20; // 腹部胀痛大便不规律

  // 湿热质
  constitutionScores['湿热质'] += answers.q5; // 皮肤容易长痤疮或湿疹
  constitutionScores['湿热质'] += answers.q7; // 大便稀烂或黏腻 (黏腻部分)
  constitutionScores['湿热质'] += answers.q13; // 舌苔厚腻舌体胖大 (黄腻部分)

  // 血瘀质
  constitutionScores['血瘀质'] += answers.q12; // 皮肤上容易出现瘀点、瘀斑，或面色晦暗
  constitutionScores['血瘀质'] += answers.q10; // 健忘注意力不集中 (也可能是气虚血瘀)
  constitutionScores['血瘀质'] += answers.q19; // 肢体麻木，或关节僵硬不适
  constitutionScores['血瘀质'] += answers.q20; // 腹部胀痛大便不规律 (固定不移的痛)

  // 气郁质
  constitutionScores['气郁质'] += answers.q8; // 情绪容易紧张、焦虑或烦躁
  constitutionScores['气郁质'] += answers.q11; // 胸闷、胁胀，或腹部胀满不适
  constitutionScores['气郁质'] += answers.q16; // 烦躁不安，失眠多梦
  constitutionScores['气郁质'] += answers.q20; // 腹部胀痛大便不规律 (与情绪相关)

  // 特禀质
  constitutionScores['特禀质'] += answers.q14; // 对花粉、尘螨、某些食物或药物过敏

  let maxScore = -1;
  let identifiedType = '平和质'; // 默认设置为平和质

  // 找到得分最高的体质类型
  for (const type in constitutionScores) {
    if (constitutionScores[type] > maxScore) {
      maxScore = constitutionScores[type];
      identifiedType = type;
    }
  }

  // 增加对平和质的判断逻辑：如果其他体质得分不高，且q1得分高，则倾向于平和质
  // 设定一个阈值，如果所有非平和质的最高分低于此阈值，则重新考虑平和质
  let sumOfNonPingheScores = 0;
  for (const type in constitutionScores) {
    if (type !== '平和质') {
      sumOfNonPingheScores += constitutionScores[type];
    }
  }

  // 这是一个非常简化的阈值判断，实际应更复杂
  const PINGHE_THRESHOLD = 5; // 如果所有非平和质的总分较低，倾向于平和质
  const Q1_PINGHE_THRESHOLD = 3; // q1分数较高

  if (sumOfNonPingheScores < PINGHE_THRESHOLD && answers.q1 >= Q1_PINGHE_THRESHOLD) {
    identifiedType = '平和质';
  } else if (answers.q1 < Q1_PINGHE_THRESHOLD && identifiedType === '平和质') {
    // 如果q1分数不高，但被判为平和质，重新评估，可能为其他未被准确捕捉的体质
    // 此时可以选择一个次高分，或者一个默认的非平和质类型
    let secondMaxScore = -1;
    let secondIdentifiedType = '气虚质'; // 备用默认值

    for (const type in constitutionScores) {
      if (type !== '平和质' && constitutionScores[type] > secondMaxScore) {
        secondMaxScore = constitutionScores[type];
        secondIdentifiedType = type;
      }
    }
    if (secondMaxScore > 0) { // 如果有其他体质得分超过0
      identifiedType = secondIdentifiedType;
    }
  }


  return identifiedType;
};

const submitQuestionnaire = async () => {
  if (Object.values(answers).some(val => val === null)) {
    ElMessage.warning('请完成所有问题')
    return
  }

  loading.value = true
  try {
    // 模拟API调用和体质辨识
    await new Promise(resolve => setTimeout(resolve, 500));
    const type = identifyConstitution(answers);
    constitutionResult.value = constitutionTypes[type];

    ElMessage.success('体质测试提交成功');

  } catch (error) {
    console.error('提交体质测试失败:', error)
    ElMessage.error('提交体质测试失败，请重试')
  } finally {
    loading.value = false
  }
}

const goToHistory = () => {
  router.push('/tcm-constitution/history')
}

</script>

<style scoped>
.tcm-constitution-container {
  padding: 15px;
  /* 调整内边距 */
  background-color: #f7f8fa;
}

.header {
  text-align: left;
  /* 标题左对齐 */
  margin-bottom: 25px;
}

.header h3 {
  font-size: 24px;
  color: #333;
}

.questionnaire-card,
.result-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  /* 调整阴影效果 */
  margin-bottom: 20px;
}

.questionnaire-card h4,
.result-card h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2e8b57;
  font-size: 20px;
}

.questionnaire-card .el-form-item {
  margin-bottom: 20px;
  /* 增加表单项间距 */
}

.questionnaire-card .el-button {
  width: 100%;
  background-color: #2e8b57;
  border-color: #2e8b57;
  border-radius: 10px;
  height: 45px;
  font-size: 16px;
  margin-top: 15px;
}

.history-card {
  text-align: center;
  margin-bottom: 20px;
}

.history-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 调整为两端对齐 */
  font-size: 16px;
  color: #2e8b57;
  font-weight: 500;
}

.history-icon {
  font-size: 24px;
  margin-right: 10px;
}

.arrow-icon {
  font-size: 20px;
  color: #999;
}

.result-card {
  border-left: 5px solid;
  /* 边框颜色由js动态控制 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-bottom: 20px;
}

.result-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  /* 增加底部填充 */
  border-bottom: 1px solid #eee;
  /* 添加底部边框 */
  margin-bottom: 15px;
  /* 增加底部外边距 */
}

.result-card h4 {
  margin-top: 0;
  margin-bottom: 0;
  /* 移除h4自身的外边距 */
  color: #333;
  font-size: 20px;
}

.result-card .el-tag {
  font-size: 14px;
  height: 28px;
  /* 调整tag高度 */
  line-height: 28px;
  /* 调整tag行高 */
  padding: 0 10px;
  /* 调整tag内边距 */
}

.result-card .result-section {
  margin-bottom: 15px;
}

.result-card .result-section p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
}

.result-card .result-section p:last-child {
  margin-bottom: 0;
}

.result-card .el-divider {
  margin: 20px 0;
  /* 调整分割线间距 */
}

.result-card .el-divider__text {
  background-color: #f7f8fa;
  /* 分割线文本背景色 */
  color: #909399;
}

/* 调整单选框样式 */
:deep(.el-radio) {
  margin-right: 20px;
  /* 增加单选框间距 */
}

:deep(.el-radio__inner) {
  border-color: #dcdfe6;
}

:deep(.el-radio__inner.is-checked) {
  background-color: #2e8b57;
  border-color: #2e8b57;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #2e8b57;
}

:deep(.el-form-item__label) {
  font-size: 15px;
  color: #333;
  margin-bottom: 8px !important;
  /* 调整标签下边距 */
}
</style>